<template>
  <div class="card">
    <a-card :hoverable="true" @click="goDetail">
      <div class="content">
        <div class="left">
          <div class="hospital">{{ hospitalInfo.hosname }}</div>
          <div class="tip">
            <div class="level">
              <like :width="18" :height="18"></like>
              <span>{{ hospitalInfo.param.hostypeString }}</span>
            </div>
            <div class="time">
              <timepiece :width="18" :height="18"></timepiece>
              <span>每天{{ hospitalInfo.bookingRule?.releaseTime }}放号哦</span>
            </div>
          </div>
        </div>
        <div class="right">
          <img :src="`data:image/jpeg;base64,${hospitalInfo.logoData}`" />
        </div>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { defineProps } from "vue";
import like from "@/components/icon-fonts/like.vue";
import timepiece from "@/components/icon-fonts/timepiece.vue";
import { useRouter } from "vue-router";

const $router = useRouter();

const props = defineProps(["hospitalInfo"]);

const goDetail = () => {
  $router.push({
    path: "/hospital/register",
    query: {
      hoscode: props.hospitalInfo.hoscode,
    },
  });
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  justify-content: space-between;

  .left {
    width: 60%;

    .hospital {
      margin: 10px 0;
      font-size: 17px;
      color: black;
    }

    .tip {
      color: #7f7f7f;
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;

      .level,
      .time {
        display: flex;
        align-items: center;

        span {
          margin-left: 5px;
        }
      }
    }

    .hospital {
    }
  }

  .right {
    img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
  }
}
</style>
